<template>
  <CommonHeader bgImage="https://ik.imagekit.io/mpjl8xreo/treehole.png">
    <h1 class="title">树洞</h1>
  </CommonHeader>
  <div class="TreeHole-container">
    <div class="TreeHole-list">
      <el-skeleton :count="4" :loading="TreeList.length === 0" animated>
        <template #template>
          <div class="skeleton">
            <el-skeleton-item
              style="width: 60px; height: 60px"
              variant="circle"
            />
            <div class="skeleton-item-content">
              <el-skeleton-item style="width: 50%" variant="h3" />
              <el-skeleton-item style="width: 70%" variant="text" />
              <div class="skeleton-image">
                <el-skeleton-item class="skeleton-image-item" variant="image" />
                <el-skeleton-item class="skeleton-image-item" variant="image" />
              </div>
              <div class="skeleton-more">
                <el-skeleton-item style="width: 30%" variant="text" />
                <el-skeleton-item style="width: 30%" variant="text" />
              </div>
            </div>
          </div>
        </template>
        <template #default>
          <div
            v-for="(item, index) in TreeList"
            :key="item.id"
            class="list-item"
          >
            <div class="list-item-info">
              <!-- 用户头像-->
              <div class="list-avatar">
                <a-avatar :size="48" :src="item.avatar" shape="square">
                </a-avatar>
              </div>
              <!--树洞内容-->
              <div class="list-content">
                <div class="username">{{ item.username }}</div>
                <div class="detail">
                  <div class="content">{{ item.content }}</div>
                  <div class="img">
                    <a-image
                      v-for="img in item.images"
                      :key="img"
                      :height="item.images.length > 1 ? 100 : 200"
                      :preview="true"
                      :src="img"
                      :width="item.images.length > 1 ? 100 : 200"
                    />
                  </div>
                </div>
                <div class="tools">
                  <div class="day">
                    {{
                      getDateDiff(
                        dayjs(item.create_time).format("YYYY-MM-DD HH:mm:ss")
                      )
                    }}
                  </div>
                  <div class="tip">
                    <!--点赞-->
                    <div
                      :class="item.islIKE ? 'active' : ''"
                      class="tip-icon"
                      @click="like(item, index)"
                    >
                      <i class="iconfont icon-dianzan"></i>{{ item.likes }}
                    </div>
                    <!--评论-->
                    <div class="tip-icon" @click="changeExpand(index)">
                      <i class="iconfont icon-pinglun"></i>{{ item.total }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="list-item-comment">
              <Comment
                ref="commentRef"
                :add="addNewComment"
                :item="item"
                @updateInit="init"
              ></Comment>
            </div>
          </div>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>
<script setup>
import CommonHeader from "@/components/CommonHeader/index.vue";
import Comment from "@/components/comment/index.vue";
import { getCurrentInstance, onMounted, ref } from "vue";
import {
  addTreeComment,
  getAllTreeList,
  likeTreeArticle,
} from "@/api/treehole.js";
import { message } from "ant-design-vue";
import { useStore } from "@/store/user.js";
import dayjs from "dayjs";
import { getDateDiff } from "@/utils/tool.js";

const { proxy } = getCurrentInstance();

const user = useStore();
const commentRef = ref(null);
const TreeList = ref([]);
// 打开评论
const changeExpand = (index) => {
  if (commentRef.value) commentRef.value[index].changeExpand();
};
// 获取树洞数据
const init = async () => {
  let res = await getAllTreeList({ userId: user.isLogin ? user.userId : "" });
  if (res && res.status === 200) TreeList.value = res.data;
};
//发布树洞评论
const addNewComment = async (params) => {
  if (user.isLogin) {
    let res = await addTreeComment(params);
    if (res && res.status === 200) {
      message.success(res.data);
      await init();
    } else message.error(res.data);
  } else {
    message.error("必须先登录才能评论哦");
  }
};

// 点赞
const like = async (item, index) => {
  if (user.isLogin) {
    if (item.islIKE) {
      item.islIKE = false;
      TreeList.value[index].likes--;
    } else {
      item.islIKE = true;
      TreeList.value[index].likes++;
    }
    let res = await likeTreeArticle({ treeId: item.id, user: 1 });
    if (res && res.status === 200) {
      message.success(res.data);
    }
  } else {
    message.warning("请先登录");
  }
};

onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  font-size: 40px;
  color: #ffff;
  font-weight: bold;
}

.TreeHole-container {
  width: 1000px;
  min-height: calc(100vh - 280px);
  margin: 15px auto;
  padding: 20px 40px;
  animation: profile_in 0.8s;
  color: #303133;

  .TreeHole-list {
    width: 100%;

    .list-item {
      width: 100%;
      padding: 20px 0;

      .list-item-info {
        display: grid;
        grid-template-columns: 100px 1fr;
        gap: 20px;
        justify-content: center;

        .list-avatar {
          width: 100%;
          display: flex;
          align-items: start;
          justify-content: end;

          img {
            width: 80px;
            height: 60px;
            border-radius: 15px;
          }
        }

        .list-content {
          display: flex;
          flex-direction: column;
          gap: 5px;

          .username {
            font-size: 18px;
            font-weight: bold;
            color: #909399;
          }

          .detail {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 10px;

            .content {
              max-width: 600px;
              overflow: hidden;
              text-wrap: wrap;
              font-size: 16px;
              color: #303133;
            }

            .img {
              display: flex;
              align-items: center;
              gap: 15px;
            }
          }

          .tools {
            width: 220px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .day {
              color: #a8abb2;
            }

            .tip {
              display: flex;

              .active {
                color: #3967ff;
              }

              .tip-icon {
                margin: 0 5px;
                cursor: pointer;

                i {
                  padding: 0 5px;
                }
              }
            }
          }
        }
      }

      .list-item-comment {
        width: 100%;
        padding: 0 60px;
        margin: 15px 0;
        border-top: 1px solid #eee;
      }
    }

    //骨架屏
    .skeleton {
      display: grid;
      grid-template-columns: 100px 1fr;
      gap: 30px;
      margin: 30px 0;

      .skeleton-image {
        display: flex;
        gap: 15px;
        margin: 15px 0;

        .skeleton-image-item {
          width: 180px;
          height: 180px;
        }
      }

      .skeleton-more {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}

:deep(.el-card__body) {
  padding: 0 !important;
}

:deep(.ant-comment-inner) {
  padding: 10px 0 !important;
}

@keyframes profile_in {
  0% {
    opacity: 0;
    transform: translateY(30%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 960px) {
  .TreeHole-container {
    width: 100%;
    padding: 20px !important;

    .TreeHole-list .list-item .list-item-info {
      grid-template-columns: 1fr 4fr !important;
      gap: 15px !important;

      .list-content .img {
        flex-wrap: wrap;
      }

      .list-content .detail .content {
        max-width: 250px !important;
      }
    }

    .TreeHole-list .list-item .list-item-comment {
      padding: 0 !important;
    }

    .skeleton {
      grid-template-columns: 1fr 4fr !important;
      gap: 15px !important;
    }

    .skeleton-image-item {
      width: 120px !important;
      height: 120px !important;
    }
  }
}
</style>
